<template>
	<view class="container-scope animated">
		<view class="content-scope">
			
			<view class="close-btn" @tap="close" v-if="showResult">
				<text class="new-iconfont icon-close"></text>
			</view>
			
			<view v-if="!isOpen">
				<!-- <view class="unopen" :class="{a0: status===0, a1: status===1}">
					<image :src="boxImg || defaultBoxImage" mode="aspectFill"></image>
				</view> -->
			</view>
			<scroll-view class="scroll-view-212" scroll-y v-else>
				<view class="sku-list">
					<view class="item" @tap="checkSku(item)" :class="'item-' + skus.length" v-for="(item, index) in skus">
						<view class="thumb-c">
							<image class="thumb" :src="item.thumb" mode="aspectFit"></image>
							<view class="title">{{item.title}}</view>
							<view class="total">×{{item.total || 1}}</view>
						</view>
					</view>
				</view>
			</scroll-view>
			
			<view class="bottom" v-if="showResult">
				<!-- <view class="luck-tips">
					<text>恭喜您获得\n{{openInfo.title}}</text>
				</view> -->
				<view class="button-c">
					<view class="btn confirm bg-purple" @tap="close">
						返回抽卡
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			boxImg: String,
			buttonTitle: String,
			list: Array,
			isNavbarEnable: false
		},
		data() {
			return {
				isOpen: false,
				showResult: false,
				status: 0,
				package: {},
				defaultBoxImage: 'https://cdn2.hquesoft.com/box/openbox.png',
			}
		},
		mounted() {
			// this.orderUuid = '605f34c73e765' // 测试
			
			this.initData()
		},
		computed: {
			skus() {
				return this.list || []
			}
		},
		methods: {
			initData() {
				this.startOpenAnimate()
			},
			startOpenAnimate()  {
				// 开盒动画
				setTimeout(() => {
					this.status = 1
					setTimeout(() => {
						this.isOpen = true
						this.$playAudio('open')
						setTimeout(() => {
							this.showResult = true
						}, 300)
					}, 200)
				}, 100)
			},
			handleRefresh() {
				// this.order = {
				// 	id: 2214
				// }
				this.isNotOpen  = false
				this.initData()
			},
			handleOk() {
				uni.switchTab({
					url: "/pages/myBox/index"
				})
				// uni.navigateTo({
				// 	url: "/pages/orderList/index"
				// })
				// this.$emit('close')
				// this.$emit('refresh')
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			close() {
				this.$emit('close')
				this.$emit('refresh')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.waiting-card {
		background: white !important;
		width: 600rpx;
		margin: 0rpx auto;
		padding: 30rpx 30rpx;
		border-radius: 10rpx;
	}
	
	.lottery-tips {
		background: white;
		font-size: 26rpx;
		padding: 10rpx 20rpx 10rpx 30rpx;
		border-radius: 30rpx;
		// margin-bottom: 30rpx;
		width: 400rpx;
		margin: 30rpx auto;
		text-align: center;
		justify-content: center;
		
		.ticket-total {
			font-weight: 500;
			font-size: 36rpx;
			color: #E63111;
		}
		.icon-arrow-right {
			font-size: 40rpx;
		}
		display: flex;
		
		align-items: center;
	}
	
	.reward-row {
		text-align: center;
		font-size: 28rpx;
		font-weight: 500;

		.number {
			font-size: 46rpx;
			color: red;
			font-weight: 700;
			margin-right: 6rpx;
		}

		.text-c {
			color: gray;
			font-size: 28rpx;
			margin-top: 6rpx;

			.check-asset-c {
				display: inline;
				margin-left: 6rpx;
			}

			.check-asset-btn {
				color: #666;
				text-decoration: underline;
			}
		}
	}

	.container-scope {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		// background-color: ;
		background: rgba(0, 0, 0, 0.6);
		z-index: 10000;
		padding-top: 200rpx;
	

		.close-btn {
			font-size: 38rpx;
			// font-weight: 500;
			background: rgba(255,  255, 255, 0.4);
			border: 2px solid rgba(255,  255, 255, 0.4);
			border-radius: 50%;
			width: 60rpx;
			color: white;
			position: absolute;
			// top: 0rpx;
			right: 200rpx;
			// position: absolute;
			// margin: 0rpx auto;
			right: 50rpx;
			top: -50rpx;
			height: 60rpx;
			text-align: center;
			line-height: 56rpx;
			box-sizing: border-box;
			z-index: 1000;
		}

		.title {
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
		}
	}

	.content-scope {
		width: 100%;
		position: relative;
		// border: 1px solid red;
		// overflow: hidden;
		min-height: 100rpx;
		margin-top: 100rpx;
		
		background: url('https://box-1306374625.cos.ap-guangzhou.myqcloud.com/youmi/img/other/My56VSDVpEV5iJhkayERljy0bztXUv8bhp5RoIG5.png');
		background-size: 90% auto;
		background-repeat: no-repeat;
		background-position: 38rpx 0rpx;
		min-height: 100vh;
		
		.unopen-c {
			width: 300rpx;
			height: 420rpx;
			margin: 0 auto;
			margin-top: 280rpx;
			position: relative;
		
			&:after {
				content: "";
				position: absolute;
				bottom: -50rpx;
				left: -50rpx;
				width: 400rpx;
				height: 100rpx;
				border-radius: 50%;
				background-color: #DCDFE6;
				box-shadow: 0 0 20rpx rgba(220, 223, 230, 1);
			}
		}
		
		.unopen {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 11;
		
			&.a0 {
				animation: shakeTopx 0.2s;
				animation-delay: 0.7s;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
				transform-origin: bottom center;
			}
		
			&.a1 {
				animation: hide 0.3s;
				transform-origin: bottom center;
				animation-fill-mode: forwards;
			}
		
			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	
	.scroll-view-212 {
		max-height: 50vh;
		// min-height: 500rpx;
		padding: 0rpx;
		// height: 800rpx;
		box-sizing: border-box;
		// padding-top: 100rpx;
	}

	.sku-list {
		margin-top: 30rpx;
		width: 100%;
		display: flex;
		// flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		// border: 1px solid  red;
		// margin-bottom: 0rpx;
		// padding: 0rpx 60rpx 0rpx 100rpx;
		

		.item {
			// float: left;
			// float: left;
			width: 210rpx;
			// height: 210rpx;
			margin-top: 30rpx;
			// border: 1px solid red;
			margin-left: 20rpx;
			// margin: 0 auto;
			// margin-top: 200rpx;
			position: relative;
			
			// clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
			overflow: hidden;
	

			image {
				// width: 100%;
				// height: 100%;
				width: 198rpx;
				height: 198rpx;
				display: block;
			}

			.thumb-c {
				margin: 0 auto;
				width: 210rpx;
				// height: 210rpx;
				position: relative;
				background-color: #ffde7c;
				z-index: 11;
				animation: showbox 1s;
				transform-origin: center;
				animation-fill-mode: forwards;
				padding-bottom: 10rpx;
				
				border: 6rpx solid white;
				box-sizing: border-box;
				
				// box-shadow: 0 0 20rpx rgba(255, 222, 124, 0.6);
				
				// clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
				
				// .thumb {
				// 	width: 210rpx;
				// 	height: 210rpx;
				// }
			}

			.title {
				color: black;
				font-size: 26rpx;
				font-weight: 500;
				text-align: center;
				margin-top: 10rpx;
			}
			.total {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				background: rgba(0, 0, 0, 0.4);
				color: white;
				font-size: 22rpx;
				font-weight: 500;
				padding: 0rpx 20rpx;
				border-radius: 20rpx;
			}
			
			// 单个
			&.item-1 {
				width: 450rpx;
				// height: 450rpx;
				.thumb-c {
					width: 450rpx;
					// height: 450rpx;
					
					image {
						width: 438rpx;
						height: 438rpx;
					}
				}
				
				// &:after {
				// 	clip-path: circle(10000rpx at 50% 50%);
				// }
			}
		}
	}
	
	.bottom {
		margin-top: 130rpx;
	}

	.luck-tips {
		position: relative;
		z-index: 11;
		text-align: center;
		font-size: 28rpx;
		letter-spacing: 1px;
		font-weight: bold;
		line-height: 1.6;
		margin-top: 26rpx;
	}

	.button-c {
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 11;
		margin: 60rpx 110rpx;

		.btn {
			z-index: 11;
			height: 82rpx;
			line-height: 82rpx;
			width: 240rpx;
			text-align: center;
			background-color: #ffcc00;
			border-radius: 10rpx;
			font-size: 26rpx;
			font-weight: bold;
			color: white;
			&:last-child {
				margin-left: 30rpx;
			}
		}
	}

	@keyframes shakeTopx {
		0% {
			transform: rotate(-6deg);
		}

		25% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(6deg);
		}

		75% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(-6deg);
		}
	}

	@keyframes hide {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		100% {
			transform: scale(0);
			opacity: 0;
		}
	}

	@keyframes showbox {
		0% {
			transform: scale(0, 0);
			opacity: 0;
		}

		30% {
			transform: scale(1, 1);
			opacity: 1;
		}

		50% {
			transform: scale(0.7, 1);
			opacity: 1;
		}

		100% {
			transform: scale(1, 1);
		}
	}
</style>
